<template>
	<view class="apply">
		<view class="edgeInsetTop"></view>
		<view class="bg-white padding-bj flex">
			<view class="cu-avatar xl margin-right-bj">
				<image :src="$wanlshop.oss(goods.image, 70, 70)" mode="aspectFill"></image>
			</view>
			<view class="text-sm" style="width: calc(100% - 128rpx);">
				<view class="margin-bottom-xs">
					<view class="text-cut-2">
						{{goods.title}}
					</view>
				</view>
				<view class="wanl-gray">
					规格：{{goods.difference}}
				</view>
			</view>
		</view>
		<view class="margin-top-bj">
			<view class="cu-form-group">
				<view class="title">物流状态</view>
				<picker @change="expressChange" :value="refund.expressType" :range="expressList">
					<view class="picker">
						<text v-if="refund.expressType > -1">{{expressList[refund.expressType]}}</text>
						<text class="wanl-gray-light" v-else>是否收到货</text>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">退款类型</view>
				<picker @change="typeChange" :value="refund.type" :range="typeList">
					<view class="picker">
						<text v-if="refund.type > -1">{{typeList[refund.type]}}</text>
						<text class="wanl-gray-light" v-else>选择退款类型</text>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">退款原因</view>
				<picker @change="reasonChange" :value="refund.reason" :range="reasonList">
					<view class="picker">
						<text v-if="refund.reason > -1">{{reasonList[refund.reason]}}</text>
						<text class="wanl-gray-light" v-else>退款的原因</text>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</picker>
			</view>
			<view class="cu-form-group margin-top-bj">
				<view class="title">退款金额</view>
				<input class="input" type="digit" :placeholder="amount.placeholder" @input="moneyInput"
					:disabled="amount.total == 0" />

			</view>
			<view class="bg-white margin-top-bj">
				<view class="cu-form-group1">
					<view class="title">上传凭证</view>
				</view>
				<view class="grid col-4 grid-square flex-sub padding-lr">
					<view class="bg-img" v-for="(item, index) in refund.images" :key="index" @tap="viewImage(index)">
						<image :src="$wanlshop.oss(item, 90, 90)" mode="aspectFill"></image>
						<view class="cu-tag bg-red" @tap.stop="delImg(index)">
							<text class="iconfont icon-close"></text>
						</view>
					</view>
					<view class="dashed" @tap="chooseImage" v-if="refund.images.length < 4">
						<text class="iconfont icon-zhaopian"></text>
					</view>
				</view>
			</view>
			<view class="cu-form-group margin-top-bj">
				<view class="title">退款理由</view>
				<input class="input" type="text" placeholder="选填" v-model="refund.refund_content"></input>
			</view>
		</view>
		<view class="wanlian cu-bar tabbar foot flex flex-direction">
			<button class="cu-btn wanl-bg-orange lg" @tap="addData">确认</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 运费策略
				freight_type: 0,
				goods: {},
				expressList: ['未收到货', '已收到货'],
				typeList: ['我要退款(无需退货)', '退货退款'],
				reasonList: ['不喜欢', '空包裹', '一直未送达', '颜色/尺码不符', '质量问题', '少件漏发', '假冒品牌'],
				// 退款
				refund: {
					order_id: 0,
					expressType: -1,
					type: -1,
					reason: -1,
					goods: 0,
					money: 0,
					images: [],
					refund_content: ''
				},
				// 价格
				amount: {
					total: 0,
					placeholder: '',
					info: ''
				}
			};
		},
		methods: {
			async addData() {
				if (this.refund.money > this.amount.total) {
					this.$wanlshop.msg(this.amount.info);
					return false;
				}
				if (this.refund.expressType == -1) {
					this.$wanlshop.msg('请选择物流状态');
					return false;
				}
				if (this.refund.type == -1) {
					this.$wanlshop.msg('请选择退款类型');
					return false;
				}
				if (this.refund.reason == -1) {
					this.$wanlshop.msg('请选择退款原因');
					return false;
				}
				if (this.refund.money <= 0) {
					uni.showModal({
						title: '重要提示',
						content: '你的退款金额可能是零元，可能失去售后机会是否确认',
						success: function(res) {
							if (res.cancel) return false;
						}
					});
				}
				// 提交
				this.$api.post({
					url: '/wanlshop/refund/addApply',
					data: this.refund,
					success: res => {
						this.$store.commit('statistics/order', {
							customer: this.$store.state.statistics.order.customer + 1
						});
						// 跳转到退款详情页
						this.$wanlshop.to(`/pages/mines/refund/details/details?id=${res}`);
					}
				});
			},
			
			chooseImage(index) {
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.$api.get({
							url: '/wanlshop/common/uploadData',
							success: updata => {
								for (let i = 0; i < res.tempFilePaths.length; i++) {
									// 读取图片宽高
									uni.getImageInfo({
										src: res.tempFilePaths[i],
										success: image => {
											this.$api.upload({
												url: updata.uploadurl,
												filePath: image.path,
												name: 'file',
												formData: updata.storage ==
													'local' ? null : updata
													.multipart,
												success: data => {
													this.refund.images
														.push(data
															.fullurl);
												}
											});
										}
									});
								}
							}
						});
					}
				});
			},
			expressChange(e) {
				this.refund.expressType = e.detail.value
			},
			typeChange(e) {
				this.refund.type = e.detail.value
			},
			reasonChange(e) {
				this.refund.reason = e.detail.value
			},
			// 退款金额
			moneyInput(e) {
				let money = e.detail.value;
				if (money > this.amount.total) {
					this.$wanlshop.msg(this.amount.info);
				}
				// 判断是否超过订单总额,超过提示
				this.refund.money = e.detail.value
			},
			viewImage(key) {
				uni.previewImage({
					urls: this.refund.images,
					current: this.refund.images[key]
				});
			},
			delImg(key) {
				this.refund.images.splice(key, 1);
			}
		},
		onLoad(option) {
			let data = JSON.parse(option.data);
			console.log(data)
			this.goods = data.goods;
			this.refund.order_id = data.order_id;
			this.refund.goods = data.goods.id;
			this.freight_type = data.freight_type;
			this.goods_number = data.goods_number;
			//计算运费价格,当只有一个商品或 运费策略累加运费可全退
			if (this.goods_number == 1 || this.freight_type == 2) {
				let price = this.$wanlshop.bcadd(data.goods.actual_payment, data.goods.freight_price);
				let info = `最多￥${price}`;
				if (parseInt(data.discount_price) > 0) {
					info +=
						`，其中总额￥${this.$wanlshop.bcmul(data.goods.price, data.goods.number)}，优惠￥${data.goods.discount_price}`;
				}
				if (parseInt(data.goods.freight_price) > 0) {
					info += `，运费￥${data.goods.freight_price}`;
				}
				this.amount.info = info;
				this.amount.placeholder = `退款金额不能超过 ￥${price} 元`;
				this.amount.total = Number(price);
			} else {
				let price = data.goods.actual_payment;
				let info = `注意：最多￥${price}`;
				if (parseInt(data.goods.discount_price) > 0) {
					info +=
						`，其中总额￥${this.$wanlshop.bcmul(data.goods.price, data.goods.number)}，优惠￥${data.goods.discount_price}`;
				}
				if (parseInt(data.goods.freight_price) > 0) {
					info += `，策略不包含运费￥${data.goods.freight_price}`;
				}
				this.amount.info = info;
				this.amount.placeholder = `退款金额不能超过 ￥${price} 元`;
				this.amount.total = Number(price);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F0F0F0;
	}

	.apply {
		.bg-white {
			background-color: #FFFFFF;
			display: flex;
			// align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			height: 160rpx;

			.cu-avatar {
				width: 120rpx;
				height: 120rpx;
				margin-right: 10rpx;

				image {
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}

			}

			.text-sm {
				.margin-bottom-xs {
					margin-bottom: 10rpx;
					// background-color: pink;
					width: 580rpx;

					.text-cut-2 {
						font-size: 28rpx;
						width: 100%;
						//单行文本超出部分隐藏
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;


					}
				}

				.wanl-gray {
					font-size: 26rpx;
					color: #828282;
				}
			}
		}

		.margin-top-bj {
			margin-top: 25rpx;
			box-sizing: border-box;

			// background-color: #FFFFFF;
			.cu-form-group {
				padding: 25rpx;
				background-color: #FFFFFF;
				display: flex;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #F1F1F1;

				.title {
					font-size: 26rpx;
					height: 52rpx;
					line-height: 52rpx;
					padding-right: 25rpx;
				}

				.picker {
					// background-color: #007AFF;
					// line-height: 76rpx;
					font-size: 26rpx;
					

					.wanl-gray-light {
						color: #999999;
					}

					.iconfont {
						margin-left: 10rpx;
						font-size: 40rpx;
						color: #999999;
					}

				}

				.input {
					// background-color: #1CBBB4;
					font-size: 26rpx;
					width: 560rpx;
					height: 60rpx;
				}
			}

			.bg-white {
				background-color: #FFFFFF;
				display: flex;
				flex-direction: column;
				height: 240rpx;

				.cu-form-group1 {
					// background-color: #007AFF;

					.title {
						font-size: 26rpx;
					}
					margin-bottom: 20rpx;
				}

				.grid {
					// background-color: pink;
					display: flex;
					align-items: center;
					.bg-img{
						width: 145rpx;
						height: 145rpx;
						position: relative;
						image{
							width: 100%;
							height: 100%;
						}
						margin-right: 35rpx;
						.cu-tag{
							position: absolute;
							top: -5rpx;
							right: -5rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							width: 40rpx;
							height: 35rpx;
							border-radius: 0 8rpx 0 8rpx;
							background-color: #808080;
							.iconfont{
								color: #FFFFFF;
								font-size: 26rpx;
							}
						}
					}

					.dashed {
						width: 145rpx;
						height: 145rpx;
						border: 1rpx solid #F1F1F1;
						display: flex;
						align-items: center;
						justify-content: center;

						.iconfont {
							font-size: 60rpx;
							color: #888888;
						}
					}
				}
			}
		}
	.wanlian{
		// background-color: pink;
		margin-top: 50rpx;
		.cu-btn{
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			width: calc(100% - 50rpx);
			color: white;
			background-image: linear-gradient(-90deg, #ff4950 0, #ff8123 100%);
		}
	}
	}
</style>
